<template>
    <div class="my-account">
        <el-tabs v-model="current">
            <el-tab-pane label="账户修改" name="account" />
        </el-tabs>
        <div class="account-box f f-col f-ac mt-40">
            <div class="account-from f f-ac f-jb">
                <img :src="userForm.avatar" class="from-left" />
                <div class="from-right f-1 f f-col f-jb">
                    <div class="from-label line-1">{{ userForm.nickname || "-" }}</div>
                    <div class="from-time">{{ userForm.createtime || "-" }} 加入</div>
                    <div class="from-row f f-ac">
                        <div class="row-title">年龄：</div>
                        <div class="f-1">
                            <el-input v-model.trim.number="userForm.birthday" placeholder="输入年龄" size="small" clearable
                                style="width: 192px" />
                        </div>
                        <div class="row-title">性别：</div>
                        <div class="f-1">
                            <el-select v-model="userForm.gender==0?'女':'男'" placeholder="选择性别" size="small" clearable
                                style="width: 192px">
                                <el-option label="男" value="1" />
                                <el-option label="女" value="0" />
                            </el-select>
                        </div>
                    </div>
                    <div class="from-row f f-ac">
                        <div class="row-title">爱好：</div>
                        <div class="f-1">
                            <el-input v-model="userForm.like" placeholder="输入爱好" size="small" clearable
                                style="width: 192px" />
                        </div>
                        <div class="row-title">手机：</div>
                        <div class="f-1">
                            <el-input v-model="userForm.mobile" placeholder="输入手机" size="small" maxlength="11" clearable
                                style="width: 192px" />
                        </div>
                    </div>
                </div>
            </div>
            <div class="form-btn" @click="handleSubmit">保存修改</div>
        </div>
    </div>
</template>

<script>
    import {
        userinfo,
        userUpdate
    } from "@/utils/home/index.js";
    export default {
        data() {
            return {
                current: "account", // 当前选中状态
                userForm: {}, // 用户信息
            };
        },

        mounted() {
            this.getUserinfo();
        },

        methods: {
             // 获取数据
             getUserinfo() {
                let that = this
                userinfo().then((response) => {  
                    that.userForm = response.data
                    console.log(that.userForm.avatar,'response')
                });
            },
            // 保存修改
            handleSubmit() {
                delete this.userForm.activity
                delete this.userForm.train
                delete this.userForm.venue
                delete this.userForm.createtime
                delete this.userForm.vx
                delete this.userForm.collect
                let that = this
                userUpdate(that.userForm).then((response) => {  
                    that.$message.success("保存成功");
                });
               
            },
        },
    };
</script>

<style lang="scss" scoped>
    .my-account {
        width: 100%;
        min-height: 483px;
        border-radius: 10px;
        box-sizing: border-box;
        padding: 20px;
        box-shadow: 0px 3px 10px rgba(217, 217, 217, 0.5);

        .account-box {
            width: 100%;
            position: relative;

            .account-from {
                width: 682px;
                height: 148px;

                .from-left {
                    width: 148px;
                    height: 148px;
                    margin-right: 30px;
                }

                .from-right {
                    height: 100%;

                    .from-label {
                        font-size: 14px;
                        color: #333;
                        font-weight: 600;
                    }

                    .from-time {
                        font-size: 12px;
                        color: #b2b2b2;
                    }

                    .from-row {
                        .row-title {
                            width: auto;
                            color: #333;
                            font-size: 14px;
                            text-align: right;
                        }
                    }
                }
            }

            .form-btn {
                user-select: none;
                position: absolute;
                width: 214px;
                height: 32px;
                line-height: 32px;
                text-align: center;
                border-radius: 5px;
                color: #fff;
                font-size: 14px;
                font-weight: 600;
                background-color: #0a4ab6;
                top: 190px;
                right: 232px;

                &:hover {
                    cursor: pointer;
                    background-color: #0e54ce;
                }

                &:active {
                    background-color: #0a4ab6;
                }
            }
        }
    }

    :deep(.el-tabs__item) {
        color: #909090;
    }

    :deep(.el-tabs__nav .is-active) {
        color: #466ec5;
    }

    :deep(.el-tabs__active-bar) {
        background-color: #466ec5;
    }

    :deep(.el-tabs__nav-wrap::after) {
        display: none;
    }
</style>